import React from "react";
import { Modal, Row, Col } from 'antd';
import {messages, setLocalStorage} from "share/common";
import menuRoute from "routes/menuRoute";
import routeService from "routes/route.service";
import "styles/operating-instruction/operating-instruction.scss"
import wrapGuide from "components/method/wrapGuide";
import {connect} from "react-redux";
import operationBg from "images/components/operation-bg.png"
import mainService from 'containers/main.service';

class OperatingInstruction extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      operatingVisible: false
    };
  }

  componentWillMount() {
    //判断用户是否第一次还未开启操作指南，若没有 自动开启
    if(!localStorage.getItem("hly.executedOperation") || localStorage.getItem("hly.executedOperation").indexOf("OperatingInstruction") === -1){
      this.setState({operatingVisible: true})
    }
  }

  componentWillReceiveProps(nextProps) {
    nextProps.show && this.setState({ operatingVisible: nextProps.show }, () => this.props.closeModal());
  }

  //由于进入管理员模式会有一个到集团仪表盘的跳转导致showGuide只能放在关闭指南的回调里无法独立，某则需要监听是否已经完成了跳转 不大有必要
  showGuide = () => {
    let options = [{
      ref: document.getElementsByClassName("operating-instruction")[0],
      title: messages('operating-instruction.key1')/*设置指南*/,
      content: messages('operating-instruction.key2')/*点击这里可以打开操作指南*/,
      placement: "bottom",
      arrowStyle: {
        left: 160
      }
    }];
    let config = {
      key: "MAIN-0303",
      total: 1
    };
    wrapGuide(options, config);
  };

  setLocalStorage = () => {
    this.showGuide();
    if(!localStorage.getItem("hly.executedOperation") || localStorage.getItem("hly.executedOperation").indexOf("OperatingInstruction") === -1){
      let loggedInAccount = JSON.parse(localStorage.getItem("hly.executedOperation")) || [];
      loggedInAccount.push("OperatingInstruction");
      setLocalStorage("hly.executedOperation", JSON.stringify(loggedInAccount));
    }
  };

  menuRouterDeal = (item) => {
    routeService.menuRouterDeal(item, this.context);
    this.setState({ operatingVisible: false }, () => this.setLocalStorage());
  };

  render() {
    const { operatingVisible } = this.state;
    const { tenantMode, isOldCompany } = this.props;
    const operationSteps = [{
      title: messages('operating-instruction.key3')/*表单管理*/,
      description: messages('operating-instruction.key4')/*创建新的表单或维护默认表单，也可以就表单所需费用进行维护*/,
      link: ["form-list", "expense-type"]
    },{
      title: messages('operating-instruction.key5')/*审批流*/,
      description: messages('operating-instruction.key6')/*为表单定义审批流*/,
      link: ["workflow"]
    },{
      title: messages('operating-instruction.key7')/*信息完善*/,
      description: messages('operating-instruction.key8')/*完善公司资料，开启汇联易报销之旅*/,
      link: ["person-manage", "org-structure", "role-setting"]
    },{
      title: messages('operating-instruction.key9')/*其他设置*/,
      description: messages('operating-instruction.key10')/*根据公司需要，进行其他的设置*/,
      link: ["announcement-information", "company-maintain", "invoice-management"]
    }];
    return (
        <Modal
          title={messages('operating-instruction.key11')/*汇联易设置指南*/}
          className="operating-instruction"
          width={950}
          visible={operatingVisible}
          footer={null}
          onCancel={(e) => this.setState({operatingVisible: false}, () => this.setLocalStorage())}
        >
          <Row gutter={40}>
            {
              operationSteps.map(item => {
                return(
                  <Col span={6}>
                    <div className="operation-title" style={{backgroundImage: `url(${operationBg})`}}>{item.title}</div>
                    <p className="operation-description">{item.description}</p>
                    <ul>
                      {item.link.map(link => {
                        if(mainService.checkMenuAuth(menuRoute.getRouteItem(link), true, tenantMode, isOldCompany)){
                          return <li onClick={() => this.menuRouterDeal(menuRoute.getMenuItemByAttr(link, 'key').url)}>{messages(`menu.${link}`)} ></li>
                        }
                      })}
                    </ul>
                  </Col>
                )
              })
            }
          </Row>
        </Modal>
    );
  }
}

OperatingInstruction.contextTypes = {
  router: React.PropTypes.object
};

OperatingInstruction.propTypes = {
  show: React.PropTypes.bool,
  closeModal: React.PropTypes.func
};

function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode,
    isOldCompany: state.login.isOldCompany,
    routeIsShow: state.main.routeIsShow
  }
}

export default connect(mapStateToProps)(OperatingInstruction);
